/**
 * written by mineo okuda on 01/03/18.
 *
 * mineo okuda - development + design
 *
 * mit license.
 */

(function(root, factory) {
	'use strict';

	if (typeof define === 'function' && define.amd) {
		// amd. register as an anonymous module.
		define([], factory);
	}
	else if (typeof exports === 'object') {
		// commonjs
		module.exports = factory();
	}
	else {
		// browser
		root.luxy = factory();
	}
}(this, function() {

	'use strict';
	
		var defaults = {
			wrapper: '#luxy',
			targets : '.luxy-el',
			wrapperspeed: 0.06,
			targetspeed: 0.01,
			targetpercentage: 0.1
		};

 		var requestanimationframe = 
			window.requestanimationframe || window.mozrequestanimationframe ||
			window.webkitrequestanimationframe || window.msrequestanimationframe;
			window.requestanimationframe = requestanimationframe;
		var cancelanimationframe = window.cancelanimationframe || window.mozcancelanimationframe;

		/**
		 * merge two or more objects. returns a new object.
		 * @param {object}   objects  the objects to merge together
		 * @returns {object}          merged values of defaults and options
		 */
		var extend = function () {

			// variables
			var extended = {};
			var deep = false;
			var i = 0;
			var length = arguments.length;

			// merge the object into the extended object
			var merge = function (obj) {
				for (var prop in obj) {
					if (obj.hasownproperty(prop)) {
						extended[prop] = obj[prop];
					}
				}
			};

			// loop through each object and conduct a merge
			for ( ; i < length; i++ ) {
				var obj = arguments[i];
				merge(obj);
			}

			return extended;

		};

		var luxy = function(){
			this.targets = [];
			this.targetslength = 0;
			this.wrapper = '';
			this.windowheight = 0;
			this.wapperoffset = 0;
		};
		luxy.prototype = {
			isanimate: false,
			isresize : false,
			scrollid: "",
			resizeid: "",
			init : function(options){
				this.settings = extend(defaults, options || {});
				this.wrapper = document.queryselector(this.settings.wrapper);

				if(this.wrapper==="undefined"){
					return false;
				}
				this.targets = document.queryselectorall(this.settings.targets);
				document.body.style.height = this.wrapper.clientheight + 'px';

				this.windowheight = window.clientheight;
				this.attachevent();
				this.apply(this.targets,this.wrapper);
				this.animate();
				this.resize();
			},
			apply : function(targets,wrapper){
				this.wrapperinit();
				
				this.targetslength = targets.length;
				for (var i = 0; i < this.targetslength; i++) {
					var attr = {
						offset : targets[i].getattribute('data-offset'),
						speedx : targets[i].getattribute('data-speed-x'),
						speedy : targets[i].getattribute('data-speed-y'),
						percentage : targets[i].getattribute('data-percentage'),
						horizontal : targets[i].getattribute('data-horizontal')
					};
					this.targetsinit(targets[i],attr);
				}
			},
			wrapperinit: function(){
				this.wrapper.style.width = '100%';
				this.wrapper.style.position = 'fixed';
			},
			targetsinit: function(elm,attr){
				
				this.targets.push({
					elm : elm,
					offset : attr.offset ? attr.offset : 0,
					horizontal : attr.horizontal ? attr.horizontal : 0,
					top : 0,
					left : 0,
					speedx : attr.speedx ? attr.speedx : 1,
					speedy : attr.speedy ? attr.speedy : 1,
					percentage :attr.percentage ? attr.percentage : 0
				});
			},
			scroll : function(){
				var scrolltoptmp = document.documentelement.scrolltop || document.body.scrolltop;
				this.scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
				var offsetbottom = this.scrolltop + this.windowheight;
				this.wrapperupdate(this.scrolltop);
				for (var i = 0; i < this.targets.length; i++) {
					this.targetsupdate(this.targets[i]);
				}
			},
			animate : function(){
				this.scroll();
				this.scrollid = requestanimationframe(this.animate.bind(this));
			},
			wrapperupdate : function(){
				
				this.wapperoffset += (this.scrolltop - this.wapperoffset) * this.settings.wrapperspeed;
				this.wrapper.style.transform = 'translate3d(' + 0 + ',' +  math.round(-this.wapperoffset* 100) / 100 + 'px ,' + 0 + ')';
			},
			targetsupdate : function(target){
				target.top += (this.scrolltop * number(this.settings.targetspeed) * number(target.speedy) - target.top) * this.settings.targetpercentage;
				target.left += (this.scrolltop * number(this.settings.targetspeed) * number(target.speedx) - target.left) * this.settings.targetpercentage;
				var targetoffsettop = ( parseint(target.percentage) - target.top - parseint(target.offset) );
				var offsety = math.round(targetoffsettop * -100) / 100;
				var offsetx = 0;
				if(target.horizontal){
					var targetoffsetleft = ( parseint(target.percentage) - target.left - parseint(target.offset) );
					offsetx = math.round(targetoffsetleft * -100) / 100;
				}
				target.elm.style.transform = 'translate3d(' + offsetx + 'px ,' + offsety + 'px ,' + 0 +')';
			},
			resize: function(){
				var self = this;
				self.windowheight = (window.innerheight || document.documentelement.clientheight || 0);
				if( parseint(self.wrapper.clientheight) != parseint(document.body.style.height)){
					document.body.style.height = self.wrapper.clientheight + 'px';
				}
				self.resizeid = requestanimationframe(self.resize.bind(self));
			},
			attachevent : function(){
				var self = this;
				window.addeventlistener('resize',function(){
					if(!self.isresize){
						cancelanimationframe(self.resizeid);
						cancelanimationframe(self.scrollid);
						self.isresize = true;
						settimeout(function(){
							self.isresize = false;
							self.resizeid = requestanimationframe(self.resize.bind(self));
							self.scrollid = requestanimationframe(self.animate.bind(self));
						},200);
					}
				});
				
			}
		};

		
		var luxy = new luxy();

		return luxy;
	})
);